<template>
  <!-- 抽奖 -->
  <div class="turntable" id="turntable">
    <!-- <div class="weui-flex">
      <p class="popup_title fz-18">恭喜您抽中<span class="type-tex"></span>！<br />（关注微信公众号参与更多福利活动）</p>
      <p style="padding-top: 10px;">并获得一枚健康知识达人勋章</p>
    </div> -->
    <div class="top-img">
      <img
        src="../../assets/turntable/luck.png"
        alt=""
        width="100%"
        height="200px"
      />
    </div>
    <!-- 转盘 -->
    <div class="cj">
      <div id="prizeImgList" style="display: none"></div>
      <div class="banner">
        <div class="turnplate">
          <canvas
            class="item"
            id="canvas"
            width="420px"
            height="400px"
            style="transform: rotate(-90deg)"
          ></canvas>
          <div id="rotate" ref="btn" @click="startRotateFn">
            <img
              class="pointer"
              src="../../assets/turntable/wheel-pointer.png"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 中奖 -->
    <div id="lotteryHot" class="popup_body" v-if="hotshow">
      <div class="popup_main">
        <div class="weui-flex">
          <p class="popup_title fz-18">
            恭喜您抽中<span class="type-tex"> {{ winPrize.prize_title }}</span
            >！<br />（关注微信公众号参与更多福利活动）
          </p>
        </div>
        <div style="width: 100%; margin: 0 auto 20px">
          <img src="../../assets/turntable/zj.png" style="width: 60%; display: block; margin: 0 auto" />
        </div>
        <div class="weui-flex">
          <van-button
            type="warning"
            @click="receiveRecord"
            class="submit-btn"
            id="submit_hot"
            >确认领取</van-button>
        </div>
      </div>
    </div>

    <!-- 谢谢参与 -->
    <div id="lotteryNo" class="popup_body" v-if="noprice">
      <div class="popup_main">
        <div class="weui-flex">
          <p class="popup_title fz-18">很遗憾您没有抽中，下次再来！</p>
        </div>
        <div style="width: 100%; margin: 0 auto 20px">
          <img src="../../assets/turntable/zj.png" style="width: 60%; display: block; margin: 0 auto"/>
        </div>
        <div class="weui-flex">
          <van-button
            type="warning"
            class="submit-btn"
            id="submit_zero"
            @click="noprice = false"
            >谢谢参与</van-button>
        </div>
      </div>
    </div>

    <!-- 中奖名单 -->
    <div class="winnerlist-box">
      <div class="winnerlist">
        <div class="winner-logo">
          <p>中奖名单</p>
        </div>
        <div id="scrollDiv" style="height: 180px">
          <ul class="user-order"  style="color: #ffffff" v-for="(item, index) in winningList" :key="index">
            <li>{{ item }}</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 实物领取弹框 -->
    <van-overlay :show="ledShow" class="myregbox">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="flexc">
            <div class="title">恭喜你</div>
          </div>
          <div class="flexc prize-name">抽中了{{ winPrize.prize_title }}</div>
          <div class="flexc">
            <div class="tips">
              请尽快填写个人信息，以便我们讲礼品准确无误的发送给您
            </div>
          </div>
          <div class="form-style">
            <van-form @submit="onSubmit">
              <van-field
                v-model="prizeInfo.phone"
                name="phone"
                label="手机号："
                placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' },{pattern:reg.phone,message:'请输入正确的手机号'}]"
              />
              <van-field
                v-model="prizeInfo.address"
                name="address"
                label="地址："
                placeholder="地址"
                :rules="[{ required: true, message: '请填写地址' }]"
              />
              <div style="margin: 16px">
                <van-button
                  round
                  block
                  type="info"
                  native-type="submit"
                  color="#e05252"
                  >提交</van-button
                >
              </div>
            </van-form>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
  
<script>
import { baseURL } from "../../api/request";
export default {
  data() {
    return {
      hotshow: false,
      noprice: false,
      openid: $.cookie("openid"), //取值，
      rewards: [],
      winPrize: {},
      data: [],
      isClick: true,
      clickId: false,
      api_url: $.cookie("api_url"),
      winningList: [
        // "小*\t抽中5元红包",
        // "小*\t抽中5元红包",
        // "小*\t抽中5元红包",
        // "小*\t抽中5元红包",
      ], //中奖名单
      q: "",
      ledShow: false, //实物领取弹框
      prizeInfo: {},
      successLottery_result: false,
      prizeVerify:"",//中奖，领取凭证
    };
  },
  components: {},
  methods: {
    // 接口确定获将
    async getPrice() {
      let res = await this.$ajax.getSendPrize({
        openid: this.openid,
        verity:this.prizeVerify
      });
      if (res.code === 0) {
        this.$toast("领取成功，请到微信“服务通知”中点击领取！");
        this.$router.replace("/index");
      } else {
        this.$toast("领取失败");
      }
    },
    // 接受奖励
    receiveRecord() {
      this.hotshow = false;
      this.getPrice();
    },
    drawRoulette(rewards) {
      //画布相关
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      //扇形颜色
      const rewards_color = [
        "#ffe090",
        "#fbe7b3",
        "#fff2d0",
        "#fbe7b3",
        "#fff2d0",
      ];
      const outsideRadius = 192; //外圆半径
      const insideRadius = 10; //内圆半径
      const textRadius = 150; //奖品距离圆心的距离
      const rewardsCount = rewards.length;
      const angle = (Math.PI * 2) / rewardsCount; //圆周角度,弧度
      ctx.clearRect(0, 0, canvas.width, canvas.height); //在给定矩形内清空一个矩形
      ctx.strokeStyle = "#FFBE04"; //属性设置或返回用于笔触的颜色、渐变或模式
      ctx.font = "18px Microsoft YaHei";
      // ctx.lineWidth = 1;
      for (let i = 0; i < rewardsCount; i++) {
        const reward = rewards[i];
        const startAngle = i * angle;
        const endAngle = (i + 1) * angle;
        const midAngle = startAngle + angle / 2;
        // 绘制背景扇形
        //无线条
        // ctx.beginPath();
        // ctx.moveTo(canvas.width / 2, canvas.height / 2);
        // ctx.arc(canvas.width / 2, canvas.height / 2, outsideRadius, startAngle, endAngle);
        // ctx.closePath();
        // ctx.fill();
        //有线条
        ctx.beginPath();
        ctx.fillStyle = rewards_color[i]; //背景色
        ctx.arc(
          canvas.width / 2,
          canvas.height / 2,
          outsideRadius,
          startAngle,
          startAngle + angle,
          false
        );
        ctx.arc(
          canvas.width / 2,
          canvas.height / 2,
          insideRadius,
          startAngle + angle,
          startAngle,
          true
        );
        ctx.stroke();
        ctx.fill();
        ctx.save();
        // 绘制奖品名称
        ctx.fillStyle = "#333333"; //文字
        //竖着
        // ctx.translate(canvas.width / 2, canvas.height / 2);
        // ctx.rotate(midAngle);
        // ctx.fillText(reward.award_title,124,0);
        //横着
        ctx.translate(
          canvas.width / 2 + Math.cos(startAngle + angle / 2) * textRadius,
          canvas.height / 2 + Math.sin(startAngle + angle / 2) * textRadius
        );
        ctx.rotate(midAngle + Math.PI / 2);
        ctx.fillText(
          reward.award_title,
          // reward.prize_title,
          -ctx.measureText(reward.award_title).width / 2,
          0
        );
        //添加对应图标,确保图片被加载完成
        var img = document.getElementById("prize_img_" + i);
        if (img) {
          img.onload = function () {
            ctx.drawImage(img, -20, 10, 40, 40);
          };
          ctx.drawImage(img, -20, 10, 40, 40);
        }
        ctx.restore();
      }
    },
    //获奖结果
    async successLottery() {
      let res = await this.$ajax.getStartLottery({
        q: this.q,
        openid: this.openid,
        // act_type: this.act_type,
        // act_id: this.act_id,
      });
      if (res.code == 1) {
        this.successLottery_result = true;
        this.winPrize = res.winAward;
        this.prizeVerify = res.PrizeVerify
        this.rotateFn(this.winPrize.prize_sort, this.winPrize.prize_title);

        // if (res.winAward.prize_cate == 2) {
        //   // 抽中的实物奖品，填写信息
        //   this.ledShow = true
        // }
      } else {
        this.successLottery_result = false;
        this.$toast(res.msg);
      }
    },

    //抽奖
    startRotateFn() {
      this.successLottery(); // 抽奖 立马开始旋转
      // btn.removeEventListener("click",startRotateFn);
      // if (this.successLottery() === true) {
      //   // var rate=getArrayProps(rewards,"randomRates");
      //   // prize_sort=getRnd(rate);

      // }
    },
    //旋转转盘
    rotateFn(item = 0, prizeName) {
      var angles =
        item * (360 / this.rewards.length) - 360 / (this.rewards.length * 2);
      if (angles < 270) {
        angles = 270 - angles;
      } else {
        angles = 360 - angles + 270;
      }
      $("#canvas").stopRotate();
      $("#canvas").rotate({
        angle: 0,
        animateTo: angles + 1800,
        duration: 2500, //  2.5 秒
        callback: () => {
          // $(".type-tex").html(`${rewards[item-1].prize_title}！`);
          $(".type-tex").html(`${prizeName}！`);
          this.showHtml(this.winPrize.prize_cate);
          // 抽奖成功后提示
        },
      });
    },
    showHtml(prize_cate = null) {
      switch (prize_cate) {
        case 0:
          // 谢谢参与
          //
          this.noprice = true;
          break;
        case 1:
          this.hotshow = true;
          break;
        case 2:
          this.ledShow = true;
          break;
        default:
          this.$toast("抽奖机会已用完！感谢您的参与！");
      }
    },

    /*获取奖项*/
    async getAwardsInfo() {
      let res = await this.$ajax.getAwardsLists({
        q: this.q,
        openid: this.openid,
      });
      if (res.code == 0) {
        this.data = res.data;
        this.drawRoulette(this.data);
        this.rewards = res.data;
        var imgCount = this.rewards.length;
        var imgHtml = "";
        for (let i = 0; i < imgCount; i++) {
          if (this.rewards[i].prize_img) {
            imgHtml +=
              "<img src='" +
              this.rewards[i].prize_img +
              "' id='prize_img_" +
              i +
              "'>";
          }
        }
        $("#prizeImgList").html(imgHtml);
      }
    },

    /*获取中奖名单*/
    async getWinner() {
      let res = await this.$ajax.getWinningLis({
        q: this.q,
        openid: this.openid,
      });
      if (res.code == 1) {
        this.winningList = res.data;
      } else {
        console.log("中奖名单网络异常");
      }
    },

    /*实物领取（个人信息）*/
    async onSubmit(value) {
      console.log(this.prizeInfo, "信息");
      console.log(value,'value信息');
      var formUserInfo = Object.values(this.prizeInfo)
      console.log(formUserInfo,'formUserInfo---');

      // 填写个人信息，走接口
      let res = await this.$ajax.getSendPrize({
        q:this.q,
        verity:this.prizeVerify,
        openid: this.openid,
        formUserInfo:formUserInfo
      });
      if (res.code === 1) {
        this.ledShow = false;
        this.$toast(res.msg);
        this.$router.replace("/index");
      } else {
        this.$toast("领取失败");
      }
    },
  },
  mounted() {
    this.q = this.$route.query.q; //区域Code-活动ID
    this.getAwardsInfo();
    this.getWinner();
  },
};
</script>
  
<style lang="scss" scoped>
.display-justbet {
  display: flex;
  justify-content: space-between;
}

.flexc {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* activity.css */
.activity-logo {
  width: 96vw;
  height: 130vw;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  margin: 0 auto;
}

.activity-bottom {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
}
.activity-rule {
  position: absolute;
  top: 10px;
  right: 0px;
}
.activity-rule a {
  padding: 10px;
  background-color: #ff9800;
  color: #fff;
  text-align: center;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.rule-wrap {
  width: 86vw;
  height: auto;
  padding: 20px 10px;
  background: #fff;
  border-radius: 10px;
  margin: 20px auto 20px;
}
.rule-close {
  display: block;
  padding: 10px 20px;
  background-color: green;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  margin: 20px 20px 10px;
}
/* activity.css end */

/* rule */
.rule-bg {
  margin: 20px;
  padding: 20px;
  background-color: #fff;
  opacity: 0.85;
  border-radius: 10px;
}
.rule-title {
  width: 100%;
  padding: 0px 0px 10px 0px;
  text-align: center;
}
/* rule */

/* answer */
.answer-title {
  text-align: right;
}
.linelist {
  width: 100%;
  color: #202121;
}
.linelist dt {
  padding: 10px 0;
  margin-bottom: 10px;
}
.linelist dd {
  padding: 10px 0px;
  margin-bottom: 10px;
}
.chance {
  color: #ff9800;
}
.answer-timer {
  text-align: right;
  color: #222;
}
.learning {
  width: 100%;
  line-height: 1.6em;
  display: inline-block;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  color: #ff9800;
}
.result-f {
  width: 100%;
  z-index: 10;
  display: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  background-color: #000;
  opacity: 0.85;
}
.popup-result {
  width: 100%;
  z-index: 10;
  display: none;
  /* position: absolute; */
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.75);
}
.result-cont {
  z-index: 20;
  width: 80%;
  min-height: 160px;
  padding: 10px;
  background-color: #fff;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 135px;
  margin: 0 auto;
  border-radius: 10px;
}
.cont-list li {
  width: 100%;
  margin-bottom: 10px;
  font-size: 18px;
  border-bottom: 1px dotted #222;
}
.cont-list-right {
  float: right;
  /* margin-right: 20px; */
}
/* answer */

/* 中奖名单 */
.winnerlist {
  margin: 10px 10px;
  padding: 10px;
  background-color: #ca1518;
  opacity: 0.85;
  border-radius: 10px;
}
/* 中奖名单 */
.title_block {
  position: relative;
  width: 100%;
  height: 2.1rem;
  margin: 0.3rem auto 0;
  text-align: center;
  font-weight: bold;
  color: #fff;
}
.winner-title {
  position: absolute;
  top: -0.2rem;
  left: 0%;
  width: 100%;
  font-size: 18px;
}
.winner-title:before {
  position: absolute;
  left: 0;
  top: -0.15rem;
  display: block;
  content: "";
  width: 110px;
  height: 32px;
  // background: url(./../../images/title-before.png) no-repeat;
  background-size: cover;
}
.winner-title:after {
  position: absolute;
  right: 0;
  top: -0.15rem;
  display: block;
  content: "";
  width: 110px;
  height: 32px;
  // background: url(./../../images/title-after.png) no-repeat;
  background-size: cover;
}
.winner-cont li {
  margin: 0;
  padding: 10px 0px;
  text-align: left;
  border-bottom: 1px solid #fff2cb;
}

/* 中奖名单 */
.winner-logo {
  width: 88vw;
  height: 70px;
  position: relative;
  top: -13px;
  left: -241px;
  margin: 0 auto;
  // top: -15vw;
}
.winner-logo img {
  width: 88vw;
  height: 26vw;
}
.winner-logo p {
  width: 88vw;
  text-align: center;
  position: absolute;
  margin: 0 auto;
  top: 8vw;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
#scrollDiv {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-top: -12vw;
  margin-bottom: 10px;
}

/*这里的高度和超出隐藏是必须的*/
#scrollDiv li {
  height: 40px;
  width: 100%;
  overflow: hidden;
  line-height: 40px;
  vertical-align: bottom;
  zoom: 1;
  padding: 0px 10px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-bottom: #fecb14 dashed 1px;
}
.linktit {
  font-weight: 500;
}
.user-order li {
  color: #ffffff !important;
}
/* luck-logo */
.luck-logo {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 68vw;
  left: 0;
  top: -20px;
}
.luck-logo-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
}
.luck-logo-img img {
  width: 100%;
  height: 100%;
}
.luck-main {
  margin-top: -8vw;
  margin-bottom: 12vw;
}

/* 大转盘样式 */
.banner {
  display: block;
  width: 80%;
  margin: -20px auto 10px;
}
.banner .turnplate {
  display: block;
  font-size: 16px;
  width: 100%;
  position: relative;
}
.banner .turnplate canvas.item {
  width: 100%;
  margin-bottom: -8px;
}
.banner .turnplate img.pointer {
  position: absolute;
  width: 31.5%;
  height: 35.5%;
  /* height: 42.5%; */
  left: 34.6%;
  top: 31%;
}

.turntable {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background-image: url("../../assets/turntable/cj-bg.jpg");
  position: absolute;

  .top-img {
    img {
      height: auto;
      display: block;
      margin: 20px auto 0;
      width: 80%;
    }
  }

  // 转盘
  .cj {
    margin-top: 3vw;

    .banner {
      background: url("../../assets/turntable/cj-zpbg.png") no-repeat left
        bottom;
      padding-bottom: 60px;
      background-size: 100% auto;

      .turnplate {
        background: url("../../assets//turntable//wheel-bg.png");
        background-size: 100% 100%;
        padding: 20px;
        box-sizing: border-box;
      }
    }

    /* 大转盘样式 */
    .banner {
      display: block;
      width: 80%;
      margin: -20px auto 10px;

      .turnplate {
        display: block;
        font-size: 16px;
        width: 100%;
        position: relative;
        background: url("../../assets/turntable/wheel-bg.png");
        background-size: 100% 100%;
        padding: 20px;
        box-sizing: border-box;

        canvas.item {
          width: 100%;
          margin-bottom: -8px;
        }

        img.pointer {
          position: absolute;
          width: 21.5%;
          height: 25.5%;
          /* height: 42.5%; */
          left: 38.6%;
          top: 36%;
        }
      }
    }
  }

  // 中奖名单
  .winnerlist-box {
    display: flex;
    justify-content: center;
    align-items: center;

    .winnerlist {
      background-color: rgba(255, 242, 208, 0.8);
      width: 90%;
      padding: 10px;
      line-height: 20px;

      .winner-logo {
        text-align: center;

        p {
          width: 30vw;
          border-radius: 20px;
          background-color: #fa422e;
          border: 1px solid #ffffff;
          letter-spacing: 2px;
          color: #ffffff;
          position: relative;
          top: -10px;
          left: 35%;
        }
      }
    }
  }
}

// 弹框样式
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .block {
    width: 312px;
    // height: 280px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    line-height: 20px;
    .title {
      font-size: 20px;
    }
    .prize-name {
      color: red;
      font-size: 18px;
      padding: 5px;
    }
    .tips {
      font-size: 13px;
      padding: 10px;
    }

    .toast-style {
      font-size: 24px;
      margin: 20px 10px;
    }
    .btn-style {
      margin-top: 50px;
    }
  }
}
</style>